vue3 ＜script setup＞语法糖

2023-03-12 03:44| 来源: 网络整理| 查看: 265

这里是引用

1.data 2.computed 3.父传子 4.子传父 5.原型链绑定和组件使用 6.父子组件 v-model 7.nextTick 8.插槽 9.路由useRoute和useRouter 10.路由守卫 11.生命周期 12.父组件调子组件的方法 ref 13.store

1.data {{ name }} {{ state.age }} {{ sex }} import { reactive, ref, toRefs } from 'vue' // ref声明响应式数据，用于声明基本数据类型 const name = ref('东东吖') // 修改 name.value = '小鲁班' // reactive声明响应式数据，用于声明引用数据类型 const state = reactive({ age: 24, sex: '男' }) // 修改 state.age = 24 // 使用toRefs解构 template可直接使用{{name}}、{{sex}} const {age, sex} = toRefs(state) 2.computed {{ count }} {{doubleCount}} import { ref,computed } from 'vue' // ref声明响应式数据，用于声明基本数据类型 const count = ref(1) //computed获取双倍count' const doubleCount =computed(()=>{ return count.value*2 }) 3.父传子

父组件

// 引入子组件(组件自动注册) import HelloWorld from './components/HelloWorld.vue'

子组件

{{props.msg}} msg }} // import { defineProps } from 'vue' // defineProps在中自动可用，无需导入 // 需在.eslintrc.js文件中【globals】下配置【defineProps: true】 // 声明props const props = defineProps({ msg: { type: String, default: "", }, }); 4.子传父 //父组件： import { reactive } from "vue"; // 引入子组件(组件自动注册) import HelloWorld from "./components/HelloWorld.vue"; const state = reactive({ msg: "我是父组件原本的值", }); const changeMsg = (val) => { state.msg = val; };

子组件

//子组件： {{ msg }} msg: { type: String, default: "", }, }); // 声明emit const emit = defineEmits(["changeMsg"]); // 声明子传父事件 const changeMsg = () => { emit("changeMsg", "我是子组件传过来的值"); }; 5.原型链绑定和组件使用

main.ts

//main.ts // 创建vue实例 const app=createApp(App) // 获取原型 const prototype = app.config.globalProperties // 绑定参数 prototype.name = '我是挂载在全局上的属性' //第二种方式： let helper = new TzPdmHelper(webSite); app.config.globalProperties.$helper = helper; //组件内获取使用 //引入 import { getCurrentInstance } from "vue"; // 获取原型 const { proxy } = getCurrentInstance(); // 输出 console.log(proxy.name); console.log(proxy.$helper); 6.父子组件 v-model

父组件

//父组件：父组件： {{state.msg}} import { reactive } from "vue"; // 引入子组件(组件自动注册) import HelloWorld from "./components/HelloWorld.vue"; const state = reactive({ msg: "我是父组件原本的值", age:24 });

子组件

//子组件：子组件： msg }} {{age}} import { defineEmits } from "vue"; // 声明emit const emit = defineEmits(["updata:msg", "updata:age"]); // import { defineEmits, defineProps } from 'vue' // defineEmits和defineProps在中自动可用，无需导入 // 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】 // 声明props const props = defineProps({ msg: { type: String, default: "", }, age: { type: Number, default: 0, }, }); 7.nextTick import { reactive ,nextTick } from "vue"; // 引入子组件(组件自动注册) import HelloWorld from "./components/HelloWorld.vue"; const state = reactive({ msg: "我是父组件原本的值", }); // 调用nextTick nextTick(()=>{ console.log("nextTick执行了..."); state.msg="我是nextTick执行后的值" }) 8.插槽

父组件

//父组件： scope.name }}，年龄{{ scope.age }} import HelloWorld from "./components/HelloWorld.vue";

子组件

//子组件： name: '东东吖', age: '25岁' }) script内如何获取插槽信息 const slots = useSlots() // 匿名插槽使用情况 const defaultSlot = reactive(slots.default && slots.default().length) console.log("defaultSlot",defaultSlot) // 1 // 具名插槽使用情况 const titleSlot = reactive(slots.title && slots.title().length) console.log("titleSlot",titleSlot) // 3 9.路由useRoute和useRouter

①新建router/index.ts

//新建router/index.ts import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; const routes: Array = [ { path: '/', redirect: '/home' }, { path: '/home', name: 'home', component: () => import('../pages/home/Index.vue'), meta: { showFooter: true, requireAuth: false, } }, { path: '/about', name: 'about', component: () => import( '../pages/about/Index.vue'), meta: { showFooter: true, requireAuth: false, } }, ]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router;

②在main.ts将路由router注册

//在main.ts将路由router注册 import { createApp } from 'vue' import App from './App.vue' import router from './router/index.ts' const app=createApp(App) app.use(router).mount('#app')

③在页面打印结果

//在页面打印结果 import { useRouter, useRoute } from "vue-router"; // 必须先声明调用 const router = useRouter(); const route = useRoute(); // 路由信息 console.log("router", router); console.log("route",route); 10.路由守卫 // 路由守卫 router.beforeEach((to, from, next) => { console.log("to",to); console.log("from",from); next() }) 11.生命周期

选项式 API 的生命周期选项和组合式 API 之间的映射 beforeCreate -> 使用 setup() created -> 使用 setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeUnmount -> onBeforeUnmount unmounted -> onUnmounted errorCaptured -> onErrorCaptured renderTracked -> onRenderTracked renderTriggered -> onRenderTriggered activated -> onActivated deactivated -> onDeactivated

12.父组件调子组件的方法 ref

父组件

import { onMounted } from "vue"; // 引入子组件(组件自动注册) import HelloWorld from "./components/HelloWorld.vue"; const zTreeRef = ref(); onMounted(() => { sonRef.value.init() });

子组件

子组件 const init=()=>{ console.log('初始化') } //导出方法 defineExpose({ init }); 13.store

vuex:【vue进阶之旅】vuex五大核心概念 ① 基础使用流程

//下载pinia npm install pinia -S

main.ts

//main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router/index.ts' // 引入pinia import { createPinia } from 'pinia' // 创建vue实例 const app=createApp(App) // 创建 Pinia 实例 const pinia = createPinia() // 注册挂载到vue实列 app.use(router).use(pinia).mount('#app')

store/index.ts

组件内使用

//组件内使用 {{ mainStore.info}} import { useMainStore } from "../../store/index.ts"; const mainStore = useMainStore();

② state 中数据的解构访问 store/index.ts

组件内使用

//组件内使用 {{ mainStore.count }} {{ mainStore.info }} {{ count }} {{ info }} 修改数据count import { toRefs } from 'vue' import { storeToRefs } from 'pinia' import { useMainStore } from "../../store"; const mainStore = useMainStore(); // 解构数据，但是得到的数据是不具有响应式的，只是一次性的 // 相当于仅仅只是...mainStore而已，只是做了reactive处理，并没有做toRefs // const { count, info } = useMainStore(); // 解决方法： // 1. 通过使用toRefs函数，因为前面所说相当于是通过reactive处理，因此可以 // const { count, info } = toRefs(mainStore); // 2. 通过pinia中提供的storeToRefs方法来解决，推荐使用 const { count, info } = storeToRefs(mainStore); const alertData = () => { mainStore.count = 10 }

③ state 中数据的修改方式（actions和组件中）

// 一般的修改 {{ mainStore.count }} {{ mainStore.info }} {{ count }} {{ info }} 修改数据count import { toRefs } from 'vue' import { storeToRefs } from 'pinia' import { useMainStore } from "../../store"; const mainStore = useMainStore(); // 解构数据，但是得到的数据是不具有响应式的，只是一次性的 // 相当于仅仅只是...mainStore而已，只是做了reactive处理，并没有做toRefs // const { count, info } = useMainStore(); // 解决方法： // 1. 通过使用toRefs函数，因为前面所说相当于是通过reactive处理，因此可以 // const { count, info } = toRefs(mainStore); // 2. 通过pinia中提供的storeToRefs方法来解决，推荐使用 const { count, info } = storeToRefs(mainStore); const alertData = () => { // 方式一：最简单的方法，如下 // 解构后更改方式 // count.value = 10 // 结构前更改方式 // mainStore.count = 10 // 方式二：若要同时修改多个数据，建议使用$patch来实现批量更新，在内部做了优化 // mainStore.$patch({ // count: mainStore.count 1, // info: "hello" // }) // 方式三：更好的批量更新方法，通过$patch传递一个函数来实现，这里的state就是useMainStore容器中的state mainStore.$patch(state => { state.count = 10 state.info = "pinia批量更新" state.count }) } //通过actions修改 // store/index.ts import { defineStore } from 'pinia' // 1. 定义容器、导出容器 // 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器 // 参数2：一些选项对象，也就是state、getter和action // 返回值：一个函数，调用即可得到容器实例 export const useMainStore = defineStore('main',{ // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求 // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染 // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导 state:()=>{ return { info:"hello,东东吖，我是Pinia", count:10 } }, getters:{}, // store/index.ts // 类似于vue2组件的methods，用于封装业务逻辑，修改state // // 注意：不能使用箭头函数来定义actions，因为箭头函数绑定外部的this actions:{ changeState (){ this.count = 10 this.info = "actions修改数据" }, changeStates (num:number){ this.count = num 2 this.info = "actions修改数据" } } }) //组件内使用 {{ mainStore.count }} {{ mainStore.info }} {{ count }} {{ info }} 修改数据count import { toRefs } from 'vue' import { storeToRefs } from 'pinia' import { useMainStore } from "../../store"; const mainStore = useMainStore(); // 解构数据，但是得到的数据是不具有响应式的，只是一次性的 // 相当于仅仅只是...mainStore而已，只是做了reactive处理，并没有做toRefs // const { count, info } = useMainStore(); // 解决方法： // 1. 通过使用toRefs函数，因为前面所说相当于是通过reactive处理，因此可以 // const { count, info } = toRefs(mainStore); // 2. 通过pinia中提供的storeToRefs方法来解决，推荐使用 const { count, info } = storeToRefs(mainStore); const alertData = () => { // 方式四：通过 actions 来修改数据 mainStore.changeState() mainStore.changeStates(10) }

③ getters 的使用 store/index.ts

// store/index.ts import { defineStore } from 'pinia' // 1. 定义容器、导出容器 // 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器 // 参数2：一些选项对象，也就是state、getter和action // 返回值：一个函数，调用即可得到容器实例 export const useMainStore = defineStore('main',{ // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求 // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染 // 2. 必须是箭头函数，这样是为了更好的 TS 类型推导 state:()=>{ return { info:"hello,东东吖，我是Pinia", count:10 } }, // 类似于组件的computed，用来封装计算属性，具有缓存的功能 getters:{ // 函数接收一个可选参数：state状态对象 count10(state){ return state.count = 10 }, count20(state){ return this.count = 20 }, // 若使用this.count，则必须指明返回数据的类型 count11():number{ return this.count = 11 } }, // store/index.ts // 类似于vue2组件的methods，用于封装业务逻辑，修改state // // 注意：不能使用箭头函数来定义actions，因为箭头函数绑定外部的this actions:{ changeState (){ this.count = 10 this.info = "actions修改数据" }, changeStates (num:number){ this.count = num 2 this.info = "actions修改数据" } } })

组件内使用

//组件内使用 {{ mainStore.count }} {{ mainStore.info }} {{ count }} {{ info }} {{ mainStore.count10 }} 修改数据count import { toRefs } from 'vue' import { storeToRefs } from 'pinia' import { useMainStore } from "../../store"; const mainStore = useMainStore(); // 解构数据，但是得到的数据是不具有响应式的，只是一次性的 // 相当于仅仅只是...mainStore而已，只是做了reactive处理，并没有做toRefs // const { count, info } = useMainStore(); // 解决方法： // 1. 通过使用toRefs函数，因为前面所说相当于是通过reactive处理，因此可以 // const { count, info } = toRefs(mainStore); // 2. 通过pinia中提供的storeToRefs方法来解决，推荐使用 const { count, info } = storeToRefs(mainStore); const alertData = () => { // 方式四：通过 actions 来修改数据 mainStore.changeState() mainStore.changeStates(10) }

【本文地址】

公司简介

联系我们